<template>
    <div class="top">我的订单</div>
    <!-- 创建选项卡链接 -->
    <div class="topNav">
        <ul class="tabs">
            <li data-target="tab1" :class="{active:activeTab==='tab1'}" @click="switchTab('tab1')">全部</li>
            <li data-target="tab2" :class="{active:activeTab==='tab2'}" @click="switchTab('tab2')">已完成</li>
            <li data-target="tab3" :class="{active:activeTab==='tab3'}" @click="switchTab('tab3')">已付款</li>
            <li data-target="tab3" :class="{active:activeTab==='tab4'}" @click="switchTab('tab4')">服务中</li>
            <li data-target="tab3" :class="{active:activeTab==='tab5'}" @click="switchTab('tab5')">待支付</li>
            <li data-target="tab3" :class="{active:activeTab==='tab6'}" @click="switchTab('tab6')">已取消</li>
        </ul>
        <!-- 创建容器 -->
        <div id="tab1" class="tab-content" v-show="activeTab === 'tab1'">
            <div class="bodyorder">
                <img src="/image25.png" alt="">
               
                </div>
                <span class="mylist">暂无订单</span>
                
        </div>
        <div id="tab2" class="tab-content" v-show="activeTab === 'tab2'">
            <div class="bodyorder">
                <img src="/image25.png" alt="">
               
                </div>
                <span class="mylist">暂无订单</span>
        </div>
        <div id="tab3" class="tab-content" v-show="activeTab === 'tab3'">
            <div class="bodyorder">
                <img src="/image25.png" alt="">
               
                </div>
                <span class="mylist">暂无订单</span></div>
        <div id="tab3" class="tab-content" v-show="activeTab === 'tab4'">
            <div class="bodyorder">
                <img src="/image25.png" alt="">
               
                </div>
                <span class="mylist">暂无订单</span></div>
        <div id="tab3" class="tab-content" v-show="activeTab === 'tab5'">
            <div class="todoback">
             <div class="todolist">
           <div class="todoed">就诊人:杨晓</div>
           <div class="todetime">就诊时间:2024年5月1日</div>
           <div class="moreinfo" @click="toggleDiv">订单详情</div>
        </div>
        <div class="moreinfotodo" v-show="isShow">
            <div>已付金额:189元</div>
            <div>就诊医院:贵州医科大学附属医院</div>
            <div>就诊科室:内科</div>
            <div>床号:无</div>
            <div>患者姓名:杨晓</div>
            <div>联系电话:13308572173</div>
            <div>天数:1天</div>
            <div>其他服务:轮椅</div>
            <div>备注:无</div>
        </div>

        </div>
            </div>
        <div id="tab3" class="tab-content" v-show="activeTab === 'tab6'">
            <div class="bodyorder">
                <img src="/image25.png" alt="">
               
                </div>
                <span class="mylist">暂无订单</span></div>
    </div>
    <!-- 设置底部组件，无实际作用 -->
    <div class="footer"></div>
    <footerNav/>
</template>
<script>
import footerNav from '@/components/home/footerNav.vue';
export default{
    data(){
        return {
            activeTab: 'tab1',
            isShow:false
        };
    },
    components:{
        footerNav,
    },
    methods:{
        switchTab(tabld){
            this.activeTab=tabld;
        },
        toggleDiv(){
            this.isShow=! this.isShow;
        }
    },
};
</script>
<style scoped>
.top{
    width: 7.86rem;
    height: 1.18rem;
    background-image: linear-gradient(to right,rgb(0,186,173),rgb(55,170,176));
    text-align: center;
    line-height: 1.18rem;
    font-size: 22px;
    color:#FFFFFF ;

}
.tabs{
    display: flex;
    list-style: none;
    padding: 0;
}
.tabs li{
    margin-right: 10px;
    cursor: pointer;
    padding-bottom: 5px;
   
  
}
.tabs li .active{
    font-weight: bold;
  
    

}
.active{
    color: #29C1E3;
    border-bottom: 3px solid #29C1E3 ;
}
/* 隐藏所有内容的容器 */
.tab-content{
    display: auto;
}
/* 显示当前激活选项卡的内容 */
.tab-content .active{
    display: block;
}
.tabs{
    width: 7.94rem;
    height: 1.18rem;
}
.tabs{
    justify-content: space-around;
    align-items: center;
    text-align: center;
}
.bodyorder{
    display: flex;
    width:7.86rem ;
    height: 12.32rem;
    background-color:#E5E5E5;
    justify-content: center;
}
.bodyorder img{
   width: 3.52rem;
   height:3.52rem;
   margin-top: 2rem;
   
}

.mylist{
    position: absolute;
    top: 7.7rem;
    left: 2.9rem;
    color: #00B1BA;
    font-size: 30px;

}
.todoback{
    width:7.86rem ;
    height: 12.32rem;
    background-color:#E5E5E5;
}
.todolist{
   position:absolute;
   top: 150px;
    margin-left: 20px;
    width: 7rem;
    height: 1.7rem;
    background-color: #FFFFFF;
    border-radius: 5%;
}
.todoed{
    margin-left: 20px;
   margin-top: 10px;
    font-size:18px;
}
.todetime{
    font-size:15px;
    margin-left: 20px;
    margin-top: 5px;
}
.moreinfo{
    width: 1.44rem;
    height: .54rem;
    background-image: linear-gradient(to right,rgb(255,235,59),rgb(0,186,173));
    margin-left: 20px;
    margin-top: 5px;
    border-radius: 5%;
}
.moreinfotodo{
    position:absolute;
    top: 250px;
    left: 20px;
    width:7rem;
    height: 500px;
    background-color: #FFFFFF;
}
.moreinfotodo div{
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid gray;
}
.footer{
    height: 20px;
}
</style>
